<!--
    @作者：814878176@qq.com
    @时间：2020-03-30
    @描述：活动主题1【致敬抗疫英烈】
	@使用："path": "pages/tabBar/activityOne/index"
 -->
<template>
	<view>
		<!-- 返回首页按钮 -->
		<view class="back-home-btn" @click="$backPage()">
			<image class="uni-image" mode="widthFix" src="/static/common/back_btn.png" />
		</view>
		<!-- 要有一张背景图定位在底部的 -->
		<image class="uni-image img-bg" mode="widthFix" src="/static/activityOne/bg_1.png" />
		<view class="content-wrapper">
			<!-- 主题标题图 -->
			<view class="banner">
				<image class="uni-image" mode="widthFix" :src="activity1.head_img" />
			</view>
			<!-- 祈福统计数 -->
			<view class="counts uni-flex uni-row uni-flex-between uni-align-c">
				<!-- 敬礼人次 -->
				<view>
					<image class="uni-image" :src="activity1.btn_count1" mode="widthFix"></image>
					<text class="count">{{analysic.jing_count || 0}}</text>
				</view>
				<!-- 点灯人次 -->
				<view>
					<image class="uni-image" :src="activity1.btn_count2" mode="widthFix"></image>
					<text class="count">{{analysic.dian_count || 0}}</text>
				</view>
				<!-- 献花人次 -->
				<view>
					<image class="uni-image" :src="activity1.btn_count3" mode="widthFix"></image>
					<text class="count">{{analysic.xian_count || 0}}</text>
				</view>
				<!-- 浏览总量 -->
				<view>
					<image class="uni-image" :src="activity1.btn_count4" mode="widthFix"></image>
					<text class="count">{{analysic.view_count || 0}}</text>
				</view>
			</view>
			<!-- 致敬人物 -->
			<view class="img-people uni-align-c">
				<image class="uni-image" mode="widthFix" :src="activity1.background_img" />
			</view>
			<!-- 祈福方式选择 -->
			<view class="salute-type uni-flex uni-row uni-flex-around uni-align-c">
				<!-- 敬礼 -->
				<view :class="{'active': saluteType==1}" @click="saluteTypeFun(1)">
					<image class="uni-image" mode="widthFix" :src="saluteType==1?saluteList[0].url_col:saluteList[0].url" />
				</view>
				<!-- 点灯 -->
				<view :class="{'active': saluteType==2}" @click="saluteTypeFun(2)">
					<image class="uni-image" mode="widthFix" :src="saluteType==2?saluteList[1].url_col:saluteList[1].url" />
				</view>
				<!-- 献花 -->
				<view :class="{'active': saluteType==3}" @click="saluteTypeFun(3)">
					<image class="uni-image" mode="widthFix" :src="saluteType==3?saluteList[2].url_col:saluteList[2].url" />
				</view>
			</view>
			<!-- 生产专属祈福海报 -->
			<!-- <view class="uni-align-c btn-1">
				<image class="uni-image" @click="goDetailPage()" mode="widthFix" src="/static/activityOne/btn_1.png" />
			</view> -->
			<view class="uni-p-b-130"></view>
		</view>
		<tabBar :rootPath="'activityOne'" :pagePath="'/index'"></tabBar>
		<!-- 公众号二维码 -->
		<uni-popup ref="codePopup" :type="'center'" :custom="true" :mask-click="false">
			<view class="code">
				<image class="uni-image img-bg" mode="widthFix" :src="qrcode.guide_img" />
				<view class="close-btn" @click="codeFun(false)"></view>
				<view class="code-img">
					<image class="uni-image img-bg" mode="widthFix" :src="qrcode.wechat_img" />
				</view>
			</view>
		</uni-popup>
		<view v-if="!showPage" class="bank-wrapper">
			<!-- 加载进度条 -->
			<!-- <view class="bar-wrapper">
				<view class="inwrapper" :style="'width:' + barWidth + '%'"></view>
				<text class="num">{{Math.round(barWidth) + '%'}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				showPage: false,
				barWidth: 0,
				barTimeIndex: 0,
				analysic: {
					view_count: 0,
					jing_count: 0,
					dian_count: 0,
					xian_count: 0
				},
				/**
				 * 致敬类型
				 */
				saluteList: [
					{
						id: "1",
						name: "敬礼",
						url: "/static/activityOne/type_1.png",
						url_col: "/static/activityOne/type_1_col.png"
					},
					{
						id: "2",
						name: "点灯",
						url: "/static/activityOne/type_2.png",
						url_col: "/static/activityOne/type_2_col.png"
					},
					{
						id: "3",
						name: "献花",
						url: "/static/activityOne/type_3.png",
						url_col: "/static/activityOne/type_3_col.png"
					}
				],
				saluteType: 0,// 默认点灯
				activity1: {},  // 页面图片数据
				qrcode: {},  // 二维码图片
			}
		},
		onLoad() {
			if(!sessionStorage.getItem("isFirstComeIn")) {
				uni.navigateTo({
					url: "/pages/home/home"
				});
			}
			let activity1 = sessionStorage.getItem("activity1");
			// 判断是否已经缓存首页页面数据
			if( activity1 ) {
				this.setData( JSON.parse(activity1) );
				if(!this.activity1.head_img) {
					this.getData();
				}
			}else {
				this.getData();
			}
			this.getData();
			let qrcode = sessionStorage.getItem( "qrcode");
			if(qrcode) {
				this.qrcode = JSON.parse(qrcode);
			}else {
				this.getqrcode();
			}
		},
		onShow() {
			this.initData();
			this.logView();
		},
		methods: {
			/**
			 * 祭品领取 - 浏览景点后都随机出现一个祭品
			 * @param {Object} type 
			 */
			codeFun(type) {
				if(type===false) {
					this.$refs.codePopup.close();  
					this.saluteType = 0;   // 还原样式
				}else if(type===true) {
					this.$refs.codePopup.open();   // 弹出框
				}
			},
			/**
			 * @param {Object} type 选择祭祀方式
			 */
			saluteTypeFun(type) {
				this.saluteType = type;
				this.goDetailPage();  // 不能放在定时器、接口请求里面
			},
			// 页面路由跳转
			goDetailPage() {
				if(!this.saluteType) {
					uni.showToast({title:"请先选择祈福方式!", icon:"none"});
					return;
				}
				let action = "";
				let num = "";
				switch (this.saluteType) {
					case 1:
						action = 'jingli';
						num = this.analysic.jing_count || 0;
						break;
					case 2:
						action = 'diandeng';
						num = this.analysic.dian_count || 0;
						break;
					case 3:
						action = 'xianhua';
						num = this.analysic.xian_count || 0;
						break;
				}
				num++;
				let type = this.saluteType;
				if(sessionStorage.getItem('notFirstShare')) {
					this.saluteType = 0;   // 还原样式
					// 跳转生成海报页面
					let pathStr = window.location.protocol + "//" + window.location.host;
					this.$openURL( pathStr + "/static/h5/posterOne.html?type=" + type +"&num=" + num + "&action=" + action );
				}else {
					// 第一次点击生成海报的时候弹出公众号二维码
					this.codeFun(true);		
					sessionStorage.setItem('notFirstShare',true)
				}
			},
			initData() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/analysic',
						 data: {},
						 success: (res) => {
							 console.log(res.data);
							 if(res.data.status == 'success'){
								 this.analysic.view_count = res.data.data.view_count;
								 this.analysic.jing_count = res.data.data.count1;
								 this.analysic.dian_count = res.data.data.count2;
								 this.analysic.xian_count = res.data.data.count3;
							 }else{
								 // alert(res.data.message);
							 }
						 },
						 fail: (res) => {
							 console.log(2222)
						 }
				});
			},
			logView() {
				this.$request({
						 method: "POST",
						 url: PATHAPI + '/view',
						 data: {},
						 success: (res) => {
							 if(res.data.status != 'success'){
								  alert(res.data.message);
							 }
						 }
				});
			},
			/**
			 * 公共图片接口
			 */
			getqrcode() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/index.php/text',
						 params: {
							page_no: "qrcode" 
						 },
						 data: {},
						 success: (res) => {
							if(res.data.status == 'success'){
								let qrcode = res.data.data || {};
								this.qrcode.guide_img = qrcode.guide_img.file_url || "/static/common/code.png";
								this.qrcode.wechat_img = qrcode.wechat_img.file_url || "/static/common/code_bg.png";
								sessionStorage.setItem( "qrcode",JSON.stringify( res.data.data || {} ) );
							}
						 }
				});
			},
			/**
			 * 页面图片数据
			 */
			getData() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/index.php/text',
						 params: {
							page_no: "activity1" 
						 },
						 data: {},
						 success: (res) => {
							if(res.data.status == 'success'){
								let data = res.data.data || {};
								this.setData(data,true);
								
							}
						 }
				});
			},
			/**
			 * 数据处理
			 */
			setData(data,isUnit) {
				if(isUnit) {
					data.head_img = data.head_img || {};
					this.activity1.head_img = data.head_img.file_url || "/static/activityOne/banner.png";
					this.activity1.background_img = data.background_img.file_url || "/static/activityOne/people.png";
					this.activity1.btn_count1 = data.btn_count1.file_url || "/static/activityOne/count_1.png";
					this.activity1.btn_count2 = data.btn_count2.file_url || "/static/activityOne/count_2.png";
					this.activity1.btn_count3 = data.btn_count3.file_url || "/static/activityOne/count_3.png";
					this.activity1.btn_count4 = data.btn_count4.file_url || "/static/activityOne/count_4.png";
					this.activity1.action1 = data.action1.file_url || "/static/activityOne/type_1.png";
					this.activity1.action1_col = data.action1_col.file_url || "/static/activityOne/type_1_col.png";
					this.activity1.action2 = data.action2.file_url || "/static/activityOne/type_2.png";
					this.activity1.action2_col = data.action2_col.file_url || "/static/activityOne/type_2_col.png";
					this.activity1.action3 = data.action3.file_url || "/static/activityOne/type_3.png";
					this.activity1.action3_col = data.action3_col.file_url || "/static/activityOne/type_3_col.png";
					sessionStorage.setItem( "activity1",JSON.stringify(this.activity1) );
				}
				this.saluteList[0].url = this.activity1.action1;
				this.saluteList[0].url_col = this.activity1.action1_col;
				this.saluteList[1].url = this.activity1.action2;
				this.saluteList[1].url_col = this.activity1.action2_col;
				this.saluteList[2].url = this.activity1.action3;
				this.saluteList[2].url_col = this.activity1.action3_col;
				this.showPage = true;  // 隐藏白页
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/css/var.styl"   
	.img-bg {
		min-height: 100%;
		height: 1402upx;
	}
	.content-wrapper {
		position: absolute;
		top: 0;
		width: 100%;
		.banner {
			position: relative;
			z-index: 9;
		}
		// 统计数
		.counts {
			padding: 0 34upx;
			margin-top: -36upx;
			margin-bottom: 8upx; 
			.uni-image {
				width: 156upx;
				height: 92upx;
				vertical-align: middle;
			}
			uni-view {
				position: relative;
				.count {
					position: absolute;
					left: 0;
					bottom: 8upx;
					width: 100%;
					line-height: 28upx;
					color: #0d2b0a;  
					font-size: 28upx;
					text-align: center;
				}
			}
		}
		// 致敬人物图
		.img-people {
			.uni-image {
				width: 468upx;
				height: 496upx;
			}
		}
		// 祈福方式选择
		.salute-type {
			align-items: flex-end;   /* 底部对齐 */
			// 选中的添加动画效果
			.active {
				opacity: 1;
				transform: scale(1);
				// animation: opacityAnim 2s linear infinite alternate;//缩放动画
				animation: opacityAnim 1s ease;
				-webkit-animation: opacityAnim 1s ease;
				-o-animation: opacityAnim 1s ease;
				transition: all 0.5s;
			}
			.uni-image {
				width: 140upx;
			}
		}
		.btn-1 {
			margin: 40upx auto;
			.uni-image {
				width: 527upx;
			}
		}
		@keyframes opacityAnim {
			0% {
				opacity: 1;
				transform: scale(1);
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-o-transform: scale(1);
			}
			60% {
				opacity: 0.8;
				transform: scale(1.3);
				-webkit-transform: scale(1.3);
				-moz-transform: scale(1.3);
				-o-transform: scale(1.3);
			}
			100% {
				opacity: 1;
				transform: scale(1);
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-o-transform: scale(1);
			}
		}
		@-webkit-keyframes opacityAnim {
			0% {
				opacity: 1;
				transform: scale(1);
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-o-transform: scale(1);
			}
			60% {
				opacity: 0.8;
				transform: scale(1.3);
				-webkit-transform: scale(1.3);
				-moz-transform: scale(1.3);
				-o-transform: scale(1.3);
			}
			100% {
				opacity: 1;
				transform: scale(1);
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-o-transform: scale(1);
			}
		}
		@-o-keyframes opacityAnim {
			0% {
				opacity: 1;
				transform: scale(1);
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-o-transform: scale(1);
			}
			60% {
				opacity: 0.8;
				transform: scale(1.3);
				-webkit-transform: scale(1.3);
				-moz-transform: scale(1.3);
				-o-transform: scale(1.3);
			}
			100% {
				opacity: 1;
				transform: scale(1);
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-o-transform: scale(1);
			}
		}
	}
	.code {
		position: relative;
		display: inline-block;
		width: 550upx;
		margin-top: -80upx;
		.code-img {
			position: absolute;
			top: 80upx;
			SetCenterX();
			.uni-image {
				width: 380upx;
			}
		}
	}
</style>